<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
                <span>报名信息</span>
                <div style="float: right;">
                    <el-button size="small" @click="onClose">取 消</el-button>
                    <el-button size="small" type="primary" @click="onFormSubmit">提交报名信息</el-button>
                </div>
            </div>
            <table class="custom-table" style="margin-bottom:10px;">
                <tr><td class="tr-title">项目名称</td><td>{{row.name}}</td></tr>
            </table>
            <el-form ref="applyForm" size="mini">
                <el-table :data="tableData" :key="keys" style="width: 100%;" ref="table" stripe>
                    <el-table-column prop="name" label="物资名称"></el-table-column>
                    <el-table-column prop="spec" label="规格型号" width="500">
                        <template slot-scope="scope">
                            <el-row :gutter="10">
                                <el-col :span="18">
                                    <el-form-item>
                                        <el-select v-model="scope.row.spec" style="width: 100%;" @click.native="sepcChange(scope.row,true)" clearable placeholder="请选择">
                                            <el-option
                                              v-for="item in options"
                                              :key="item"
                                              :label="item"
                                              :value="item">
                                              <span>{{ item }}</span>
                                              <el-button style="float:right" @click.stop="delSkus(item,scope.row)" type="text">删除</el-button>
                                            </el-option>
                                          </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-button type="text" @click="addSpec(scope.row)" size="mini">新增</el-button>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <table class="custom-table" style="margin-top:10px;">
                <tr><td class="tr-title wally-label">上传报名资料</td><td>
                    <label>{{otherQualification}}</label>
                    <el-button size="small" @click="initPriceUpload" type="primary">选择文件</el-button>
                    <input type="file" accept="application/pdf" ref="priceFile" @change="priceChange" style="display: none;" />
                </td></tr>
                <tr><td class="tr-title">备注</td>
                    <td><el-input type="textarea" v-model="remarks"></el-input>
                    </td>
                </tr>
            </table>
        </el-card>

        <el-dialog title="添加规格" :visible.sync="spceForm.visible" width="400px" append-to-body :close-on-click-modal="false">
            <el-form :model="spceForm" ref="spceForm" class="demo-ruleForm">
                <el-form-item label="规格名称" prop="skus" :rules="[{ required: true, message: '请输入规格名称', trigger: 'blur' }]">
                  <el-input v-model="spceForm.skus"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="spceForm.visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitAddSkus('spceForm')">提交</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { uploads } from "@/api/common_api"
    import { getSupplierSpecList,saveSupplierSpec } from "@/api/supplier_api"
    import { bidPurchaseSupplierQuote} from "@/api/purchase_api"
    export default {
        props: ['row'],
        data() {
            return {
                remarks:"",//说明
                qualification:"",//资质 后端
                otherQualification:"",//临时资质
                tableData:[],//原列表数据
                keys:0,//原列表
                spceForm:{visible:false,skus:'',goodsId:''},
                options:[],
                goodsSkus:{}
            };
        },
        mounted(){
            if(this.row.purchaseGoodsDetail){//物资字符串转数组
                this.tableData = JSON.parse(this.row.purchaseGoodsDetail);
            }
        },
        methods: { 
            //文件上传
            initPriceUpload(){
                this.$refs.priceFile.click();
            },
            async priceChange(e){
                e.preventDefault();
                let _this = this;
                let file = e.target.files[0];
                if(file===undefined){return;}
                let formData = new FormData();
                formData.append("resType",file);
                const {code,data} = await uploads('enrollData',formData);
                if(code === 200){
                    this.otherQualification = file.name;//临时储存
                    this.qualification = data//传给后端
                    e.target.value = "";
                }
            },
           //规格 根据物资名称匹配当前物资
           async sepcChange(row,flag){
                let params = {};
                if(flag){//初始化
                    params.goodsId = row.goodsId;//物资id
                }else{//存在
                    params.goodsId = this.spceForm.goodsId;//物资id
                }
                let user = this.$store.getters.permission_user;
                if(user.purchaseSupplier === null){//不是供应商
                    params.purchaseId = this.supplierId;
                }else{//供应商
                    params.purchaseId = user.purchaseSupplier.id;
                }
                const {code,data} = await getSupplierSpecList(params);
                if(code === 200){
                    if(data && data !== null){
                        this.goodsSkus = data;
                        this.options = data.skus.split(',');
                    }
                }
            },
            //新增规格
            addSpec(row){
                this.spceForm.skus = '';
                this.spceForm.goodsId = row.goodsId;
                this.spceForm.visible = true;
            },
            async delSkus(key,row){
                this.spceForm.goodsId = row.goodsId;
                let params = {}
                let user = this.$store.getters.permission_user;
                if(user.purchaseSupplier === null){
                    params.purchaseId = this.supplierId;//当前点击供应商id
                }else{
                    params.purchaseId = user.purchaseSupplier.id;//登录供应商id
                }
                let keys = '';
                if(this.goodsSkus.skus.includes(key+',')){
                    keys = key+',';
                }else{
                    keys = this.goodsSkus.skus.includes(key) ? key : ','+key;
                }
                params.skus = this.goodsSkus.skus.split(keys).join("");
                params.id = this.goodsSkus.id;
                params.goodsId = this.spceForm.goodsId;
                const {code} = await saveSupplierSpec(params);
                if(code === 200){
                    this.sepcChange('',false);
                }
            },
            //新增规格
            submitAddSkus(formName){
                this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        //去重
                        if(this.goodsSkus.skus !== undefined && this.goodsSkus.skus.includes(this.spceForm.skus)){
                            return this.$message.error('规格名称重复');
                        }

                        let params = {};
                        let user = this.$store.getters.permission_user;
                        if(user.purchaseSupplier === null){
                            params.purchaseId = this.supplierId;//当前点击供应商id
                        }else{
                            params.purchaseId = user.purchaseSupplier.id;//登录供应商id
                        }
                        if(this.goodsSkus.id){//存在就是修改
                            params.skus = this.spceForm.skus + ","+this.goodsSkus.skus;
                            params.id = this.goodsSkus.id;
                        }else{
                            params.skus = this.spceForm.skus;
                        }
                        params.goodsId = this.spceForm.goodsId;
                       const {code} = await saveSupplierSpec(params);
                       if(code === 200){
                            this.sepcChange('',false);
                            this.spceForm.skus = '';//清空已选中的数据
                            this.spceForm.visible = false;
                       }
                    } else {
                        return false;
                    }
                });
            },
          
            //提交报名
            onFormSubmit(){
                this.$confirm("确认提交", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(async () => {
                let params = {};
                params.bidId = this.row.id;
                params.qualification = this.qualification;//报名资料
                params.remarks = this.remarks;//说明
                params.quoteDetailVOS = this.tableData;//物资
                let { code } = await bidPurchaseSupplierQuote(params);
                if(code === 200){
                    this.$message.success("报价成功");
                    this.onClose();
                }
                }).catch(() => {});
            },
            clear(){
                this.remarks="";//说明
                this.qualification="";//资质 后端
                this.otherQualification="";//临时资质
                this.tableData=[];//原列表数据
            },
            //关闭报价
            onClose(){
                this.clear();
                this.$emit('on-cancel-click','enroll');
            }
        }
    };
    </script>
    
    <style>
        .wally-label:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    </style>